/**
 * Created by 张淑曼 on 2018/12/14.
 */
var id = 99;
function init(id){
    var rightTitle1 = '近5年主变压器新增容量';
    var rightTitle2 = '在运主变压器运行年限分布';
    var unit = '（万MVA）';
    function title(title1,title2,unit){
        $('#title1').html(title1);
        $('#title2').html(title2);
        $('#unit').html(unit);
    }
    title(rightTitle1,rightTitle2,unit);
    $('.title').click(function () {
        $(this).siblings('.list').slideDown(100).parents().siblings().children('.list').slideUp(100);
        var i=$(this).parent().index();

        if(i==0){
            rightTitle1 = '近5年主变压器新增容量';
            rightTitle2 = '在运主变压器运行年限分布';
            unit= '(万MVA)';
            title(rightTitle1,rightTitle2,unit);
            chart1('容量（万MVA）','(万MVA)');
            chart2('容量（万MVA）');
        }else if(i==1){
            rightTitle1 = '近5年输电线路新增长度';
            rightTitle2 = '在运输电线路运行年限分布';
            unit = '(万公里)';
            title(rightTitle1,rightTitle2,unit);
            chart1('长度（万公里）','(万公里)');
            chart2('长度（万公里）');
        }else if(i==2){
            rightTitle1 = '近5年配电压器新增容量';
            rightTitle2 = '在运配电压器运行年限分布';
            unit = '(万MVA)';
            title(rightTitle1,rightTitle2,unit);
            chart1('配电线路(万公里)','(万MVA)');
            chart2('容量（万MVA）');
        }
        $('.map-line').show();

        $('.map-text').hide();
        console.log(i);
        $('.tab li').eq(i).addClass('active').siblings().removeClass('active');
    });
    $('#pdxl').click(function () {
        rightTitle1 = '近5年配电线路新增长度';
        rightTitle2 = '在运配电线路运行年限分布';
        unit = '(万公里)';
        title(rightTitle1,rightTitle2,unit);
        $(this).addClass('active').siblings().removeClass('active');
        $('.map-line').hide();
        $('.map-img .sd').show();
        $('.map-text').show();
    });
    function zbyq(xData,barData,yName){
        var zbyqCharts = echarts.init(document.getElementById('zbyq'));
        var gain = 0.9;
        var gap = 0;
        var color = ['#1AE7FC', '#209ADE', '#49CB88', '#0BA85D', '#497ACB', '#0C23AB', '#EED046', '#DE9904', '#F77F0F', '#F95B01']
        //柱子数据
        var zbyqoption = {
            grid: {
                left: '3%',
                top: '13%',
                right: '2%',
                bottom: '5%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(160,160,160,0.3)',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#69A5B8',
                        fontSize: 32 * gain,
                    }
                },
                data: xData
            }, ],
            yAxis: {
                type: 'value',
                name: yName,
                nameGap: 35 + gap,
                nameTextStyle: {
                    color: '#69A5B8',
                    fontSize: 32 * gain,
                    padding:[0,0,0,2300],

                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(160,160,160,0.3)',
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#69A5B8',
                        fontSize: 32 * gain,
                    }
                }
            },
            series: [{
                type: 'bar',
                stack: 1,
                xAxisIndex: 0,
                barWidth: 50,
                barGap: 5,
                z: 2,
                label:{
                    show:true,
                    position:'top',
                    textStyle:{
                        color: '#69A5B8',
                        fontSize: 32 * gain,
                    }
                },
                data: function() {
                    var itemArr = [];
                    for (var i = 1; i < (barData.length + 1); i++) {
                        var item = {
                            value: barData[i - 1],
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 50,
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: color[translateColor(i) * 2 - 2]
                                    }, {
                                        offset: 1,
                                        color: color[translateColor(i) * 2 - 1]
                                    }]),
                                }
                            }
                        };
                        itemArr.push(item);
                    }
                    return itemArr;
                }()
            }, ]
        };

        function translateColor(index) {
            if (index > 5) {
                return translateColor(index - 5)
            }
            return index
        }
        zbyqCharts.setOption(zbyqoption);
    }



//
    function yxnx(year,pieData){
        var yxnxCharts = echarts.init(document.getElementById('yxnx'));
        yxnxoption = {
            tooltip: {
                trigger: 'item',
                formatter: "{b}"
            },
            color:['#5DCEEE','#209DE0','#0A57C9','#1F37B1','#E0CB62','#D18A3C'],
            legend: {
                orient: 'vertical',
                top: 100,
                right: 450,
                itemWidth:50,
                itemHeight:35,
                data: year,
                textStyle: {
                    color: "#E1E2E3",
                    fontSize:32,


                }
            },
            series: [

                {
                    name: '',
                    type: 'pie',
                    radius: ['65%', '80%'],
                    center:['20%','45%'],
                    data: pieData,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            // position: 'inner',
                            // formatter: '{d}%',
                            show: false,
                            textStyle: {
                                color: '#fff',
                                fontWeight: 'bold',
                                fontSize: 32
                            }
                        }
                    },
                }
            ]
        };
        yxnxCharts.setOption(yxnxoption);

    }
    yxnx();


    /*
     * 接口
     * */
    $(document).ready(function () {
        //变电
        $.ajax({
            type:'POST',
            url:url+'getPowerData?orgNo='+id,
            data:null,
            dataType:'json',
            success:function(data){
                //console.log(data);
                $('#bd_z').text(data[0]['变电站/换流站（座）']);
                $('#bd_mva').text(fix(data[0]['容量（万MVA）']));
                $('#sd_t').text(data[0]['条数（条）']);
                $('#sd_gl').text(fix(data[0]['长度（万公里）']));
            },
            error:function(err){
                console.log(err);
            }
        });
        $.ajax({
            type:'POST',
            url:url+'getVoltageData?orgNo='+id,
            data:null,
            dataType:'json',
            success:function(data){
                var html='',html2='';
                console.log(data);
                for(var i=0;i<data.length;i++){
                    if(data[i]['变电站/换流站（座）'] == null || data[i]['容量（万MVA）'] == null){
                        data[i]['变电站/换流站（座）'] = 0;
                        data[i]['容量（万MVA）'] = 0;

                    }

                    var w =data[i]['变电站/换流站（座）']/fix(data[i]['容量（万MVA）']);
                    html +=`
                        <li>
                            <p>${data[i].电压等级}</p>
                            <p><span style="width:${w+50}%"></span></p>
                            <p><span class="text-color">${data[i]['变电站/换流站（座）']}</span> 座 <b>/</b> <span class="text-color">${fix(data[i]['容量（万MVA）'])}</span> 万MVA</p>
                        </li>
                    `;
                    html2 +=`
                        <li>
                            <p>${data[i].电压等级}</p>
                            <p><span style="width:${w+50}%"></span></p>
                            <p><span class="text-color">${data[i]['条数（条）']}</span> 条 <b>/</b> <span class="text-color">${fix(data[i]['长度（万公里）'])}</span> 万公里</p>
                        </li>
                    `
                }
                $('#sub_list').html(html);
                $('#tran_list').html(html2);
            },
            error:function(err){
                console.log(err);
            }
        });
        $.ajax({
            type:'POST',
            url:url+'getTransmissionData?orgNo='+id,
            data:null,
            dataType:'json',
            success:function(data){
                console.log(data);
                var w =data[0]['条数（条）']/fix(data[0]['长度（万公里）']);

                $('#dms_list').html(`
                         <li>
                            <p>配电变压器</p>
                            <p><span style="width:${w+50}%"></span></p>
                            <p><span class="text-color">${data[0]['条数（条）']}</span> 万座 <b>/</b> <span class="text-color">${fix(data[0]['长度（万公里）'])}</span> 万KVA</p>
                        </li>
                        <li>
                            <p>配电线路</p>
                            <p><span style="width:${w+50}%"></span></p>
                            <p><span class="text-color">${data[0]['条数（条）']}</span> 条 <b>/</b> <span class="text-color">${fix(data[0]['长度（万公里）'])}</span> 万公里</p>
                        </li>

            `)
            }
        });
        chart1('容量（万MVA）','(万MVA)');
        chart2('容量（万MVA）');
    });


//近五年新增容量
    function chart1(barName,yName){
        $.ajax({
            type:'POST',
            url:url+'getDeviceInputCount?orgNo='+id,
            data:null,
            dataType:'json',
            success:function(data){
                console.log(data);
                var year=[],barData=[];
                for(var i=0;i<data.length;i++){
                    year[i] = data[i].YEAR;
                    barData[i] = fix(data[i][barName]);
                }
                zbyq(year,barData,yName);
            },
            error:function(err){
                console.log(err);
            }
        });
    }



    function chart2(pieVal){
        //主变压器年限分布
        $.ajax({
            type:'POST',
            url:url+'getDeviceYearsDistribution?orgNo='+id,
            data:null,
            dataType:'json',
            success:function(data){

                console.log(data);
                var year=[],pieData=[],html='';
                for(var i=0;i<data.length;i++){
                    var objData={};
                    year[i] = data[i].DIM_YEAR;
                    objData.value = fix(data[i][pieVal]);
                    objData.name = data[i].DIM_YEAR;
                    pieData.push(objData);
                    html += `
                        <li class="text-color">${fix(data[i][pieVal])}</li>
                    `
                }
                $('.yxnx-data').html(html);
                yxnx(year,pieData);

            },
            error:function(err){
                console.log(err);
            }
        });
    }
}
init(99);
$('.sd').click(function () {
    $(this).css('opacity',1);
    //init();
});

















